<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="68px">
			<el-form-item label="月份" prop="status">
				<el-date-picker v-model="queryParams.month" type="month" format="yyyy-MM" value-format="yyyy-MM" placeholder="选择月份" @change="monthChange"></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			    <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
			</el-form-item>
		</el-form>
		
		<!-- <el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
					v-hasPermi="['bpmforns:reportforms:export']">导出</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row> -->


		<el-table border v-loading="loading" :data="list">
			<el-table-column label="姓名" align="center" prop="name" />
			<el-table-column v-for="(item, index) in monthDay" :key="index" :label="item" align="center">
				<template slot-scope="scope">
					<div v-if="scope.row.dayList.hasOwnProperty(item)">
						<span class="fukuan1" v-if="scope.row.dayList[item].isLecturerPaymentStatus == 1">{{ scope.row.dayList[item].courseDealerName }}</span>
						<span class="fukuan2" v-else-if="scope.row.dayList[item].paymentStatus == 1">{{ scope.row.dayList[item].courseDealerName }}</span>
						<span v-else>{{ scope.row.dayList[item].courseDealerName }}</span>
					</div>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import { selectLedger } from "@/api/course/lecturer"
	import { getDaysInMonth, generateDailyDates } from "@/utils/index"
	import XLSX from 'xlsx'
	export default {
		data() {
			return {
				loading: true,
				list: [],
				showSearch: true,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					month: '',
				},
				monthDay: []
			}
		},
		created() {
			let nowDate = new Date();
			let date = {
				year: nowDate.getFullYear(),
				month: nowDate.getMonth() + 1,
				day: nowDate.getDate()
			};
			
			let year = date.year;
			let month = date.month >= 10 ? date.month : 0 + date.month;
			
			this.queryParams.month = year + "-" + month;
			this.getList();
			this.getMonthDayList(year, month);
		},
		methods: {
			getList(){
				console.log('获取台账');
				this.loading = true;
				this.list = [];
				selectLedger(this.queryParams.month).then(res => {
					console.log('列表信息', res);
					if(res.code == 200){
						let month = this.queryParams.month.split('-')[1];
						res.data.forEach(item => {
							let itemDayList = {};
							
							item.ledgers.forEach(order => {
								console.log(order.startTime,  order.endTime);
								let dayList = generateDailyDates(order.startTime, order.endTime, '{d}', month);
								console.log(dayList);
								
								dayList.forEach(day => {
									day = parseInt(day);
									
									if(!(day in itemDayList)){
										itemDayList[day] = {
											courseDealerName: order.courseDealerName,
											paymentStatus: order.paymentStatus,
											isLecturerPaymentStatus: order.isLecturerPaymentStatus,
										};
									}
								});
							})
																		
							item.dayList = itemDayList;
							this.list.push(item)
						});
					}
					
					this.loading = false;
					console.log(this.list);
				});
			},
			/**
			 * 获取指定月所有天
			 * @param {Object} year
			 * @param {Object} month
			 */
			getMonthDayList(year, month){
				this.monthDay = getDaysInMonth(year, month);
				console.log(this.monthDay);
			},
			/**
			 * 月份改变
			 * @param {Object} e
			 */
			monthChange(e){
				var list = e.split('-');
				this.getMonthDayList(parseInt(list[0]), parseInt(list[1]));
				this.handleQuery();
			},
			/**
			 * 搜索
			 * @param {Object} e
			 */
			handleQuery(){
				this.getList();
			},
			/**
			 * 重置按钮操作
			 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			/**
			 * 导出
			 */
			handleExport() {
			const cellElements = document.querySelectorAll('.has-gutter .cell');
	        const contentArray = Array.from(cellElements).map(cell => cell.textContent.trim());

			const exportData = [];
			exportData.push(contentArray);

			const trElements = document.querySelectorAll('.el-table__body tr');
			
			trElements.forEach(function(item, index) {
			 const cells = item.querySelectorAll('.cell');
			 const arr=Array.from(cells).map(cell => cell.textContent.trim());
			 exportData.push(arr);
			});
			
			// 创建工作簿
			const workbook = XLSX.utils.book_new();
			const worksheet = XLSX.utils.aoa_to_sheet(exportData);
			
			// 添加工作表到工作簿
			XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
			
			// 导出文件
			XLSX.writeFile(workbook, '约课报表.xlsx');
			}
		}
	}
</script>

<style scoped>
	::v-deep .el-table--medium .el-table__cell{
		padding: 0px !important;
	}
	
	::v-deep .el-table .cell{
		padding: 0px !important;
		height: 40px;
		line-height: 40px;
	}
	
	.fukuan1{
		width: 100%;
		height: 100%;
		display: block;
		background-color: #ffff00;
	}
	
	.fukuan2{
		width: 100%;
		height: 100%;
		display: block;
		background-color: #c5d9f1;
	}
</style>